<!-- 通用证照卡片 -->
<template>
  <div class="licence-card">
    <div class="header">
      <div class="licence-name">
        <slot />
      </div>
      <div class="licence-code" v-if="type !== 'create' && data.sysNumber">{{data.sysNumber}}</div>
    </div>
    <div class="main">
      <div class="licence-img">
        <img v-if="isPdf" :src="loadedPdfView" @click="previewpdf"/>
        <div v-else class="img-corver" v-viewer :url="[data.url]">
          <img :src="data.url" alt="">
        </div>
      </div>
      <div class="licence-info">
        <p>
          <span class="title">有效期从：</span
          ><span class="text">{{data.startDate || data.recordTime}}</span>
        </p>
        <p>
          <span class="title">截止日期：</span
          ><span class="text">{{data.endDate || '--'}}</span>
        </p>
        <p><span class="title">长期有效：</span><span class="text">{{data.effectivenessKey ? '是': '否' }}</span></p>
        <p>
          <span class="title">证照编码：</span
          ><span class="text">{{data.creditCode || data.licenceCode || data.certificateCode || data.registerNum}}</span>
        </p>
        <p>
          <span class="title">证照名称：</span
          ><span class="text">
            <slot />
          </span>
        </p>
      </div>
    </div>
    <div class="ops-footer">
      <el-button class="ops-btn" style="color: #4d84ff;" type="text"
        @click="seeDetail"
        >详情</el-button
      >
      <el-button class="ops-btn" style="color: #52c419;" type="text"
        @click="updateLicence"
        :disabled='type === "check"'
        >更新</el-button
      >
      <el-button class="ops-btn" style="color: #4d84ff;" type="text"
        @click.stop="downLoadLicence"
        >下载</el-button
      >
      <el-button class="ops-btn" style="color: #4d84ff;" type="text"
        @click="seeHistory"
        >历史</el-button
      >
      <el-button class="ops-btn" style="color: #e63937;" type="text"
        @click="deleteItem"
        :disabled='type === "check"'
        >删除</el-button
      >
    </div>
  </div>
</template>
<script>
import { urlDownload } from '@const/utils.js'

export default {
  name: 'licenceCard',
  props: {
    data:{
      default: () => {},
      type: Object
    },
    type: {
      default: 'create',
      type: String
    }
  },
  data() {
    return {
      loadedPdfView: require('./img/pc-zzxx-scpdf-img.png')
    }
  },
  computed: {
    isPdf() {
      return this.data.url.includes('.pdf');
    },
  },
  created() {
    console.log(this.type, 'type')
  },
  methods: {
    seeDetail() {
      this.$emit('detail', this.data)
    },
    updateLicence() {
      this.$emit('update', this.data)
    },
    downLoadLicence() {
      urlDownload(this.data.url)
    },
    seeHistory() {
      this.$emit('history', this.data)
    },
    deleteItem() {
      this.$emit('delete', this.data)
    },
    // pdf预览
    previewpdf () {
      this.$pdfViewer({ url: this.data.url, title: 'PDF预览' })
    }
  }
}
</script>
<style lang="less">
.licence-card {
  width: 380px;
  height: 242px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  .header {
    position: relative;
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
    .licence-name {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #666;
      letter-spacing: 0;
      display: inline-block;
    }
    .licence-code {
      width: 130px;
      height: 20px;
      line-height: 20px;
      position: absolute;
      top: 10px;
      right: 0;
      font-size: 14px;
      color: #4d84ff;
      letter-spacing: 0;
      background: #eff4ff;
      border-radius: 100px 0 0 100px;
      padding: 0 0 0 10px;
    }
  }
  .main {
    padding: 0 10px 0 10px;
    box-sizing: border-box;
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .licence-img {
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 2px;
      min-width: 94px;
      max-width: 94px;
      height: 125px;
      margin-right: 30px;
      .img-corver{
        width: 100%;
        height: 100%;
        img{
          width: 100%;
          height: 100%;
        }
      }
      
    }
    .licence-info {
      flex: 1;
      height: 125px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      p {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .title {
          min-width: 70px;
          margin-right: 10px;
        }
        .text {
          flex: 1;
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span {
          display: inline-block;
        }
      }
    }
  }
  .ops-footer {
    height: 44px;
    margin-top: 20px;
    border-top: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .ops-btn {
      width: calc(25% - 1px);
      height: 100%;
      border-right: 1px solid #ccc;
      margin: 0;
      &:last-child {
        border: none;
      }
    }
  }
}
</style>
